<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!--head-->
<head th:fragment="head(title)">
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
    <meta content="webkit|ie-stand|ie-comp" name="renderer">
    <meta content="yes" name="mobile-web-app-capable">
    <meta content="telephone=no" name="format-detection">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style">
    <meta itemprop="name" content="FantasyBlog"/>
    <meta itemprop="image" content="https://cdn.jsdelivr.net/gh/geek-cy/img/blog/quanyecha.jpg"/>
    <meta name="description" itemprop="description" content="基于SpringBoot的个人博客系统"/>
    <link href="/static/front/css/all.css" rel="stylesheet" type="text/css">
    <link href="/static/front/css/materialize.min.css" rel="stylesheet">
    <link href="/static/front/css/aos.css" rel="stylesheet" type="text/css">
    <link href="/static/front/css/animate.min.css" rel="stylesheet" type="text/css">
    <link href="/static/front/css/matery.css" rel="stylesheet" type="text/css">
    <link href="/static/front/css/my.css" rel="stylesheet" type="text/css">
    <link rel="icon" href="/static/front/image/favicon.ico">
    <style>
        .nav-transparent .github-corner {
            display: none !important;
        }

        .github-corner {
            position: absolute;
            z-index: 10;
            top: 0;
            right: 0;
            border: 0;
            transform: scale(1.1);
        }

        .github-corner svg {
            /*github颜色*/
            color: #00B271;
            fill: #fff;
            height: 64px;
            width: 64px;
        }

        .github-corner:hover .octo-arm {
            animation: a 0.56s ease-in-out;
        }

        .github-corner .octo-arm {
            animation: none;
        }

        @keyframes a {
            0%,
            to {
                transform: rotate(0);
            }
            20%,
            60% {
                transform: rotate(-25deg);
            }
            40%,
            80% {
                transform: rotate(10deg);
            }
        }

    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!--vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!--axios异步工具-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
    <!--时间格式化工具-->
    <script src="/static/front/js/moment.js"></script>
    <!--时间汉化-->
    <script async type="text/javascript">
        moment.locale('zh-cn', {
            months: '一月_二月_三月_四月_五月_六月_七月_八月_九月_十月_十一月_十二月'.split('_'),
            monthsShort: '1月_2月_3月_4月_5月_6月_7月_8月_9月_10月_11月_12月'.split('_'),
            weekdays: '星期日_星期一_星期二_星期三_星期四_星期五_星期六'.split('_'),
            weekdaysShort: '周日_周一_周二_周三_周四_周五_周六'.split('_'),
            weekdaysMin: '日_一_二_三_四_五_六'.split('_'),
            longDateFormat: {
                LT: 'HH:mm',
                LTS: 'HH:mm:ss',
                L: 'YYYY-MM-DD',
                LL: 'YYYY年MM月DD日',
                LLL: 'YYYY年MM月DD日Ah点mm分',
                LLLL: 'YYYY年MM月DD日ddddAh点mm分',
                l: 'YYYY-M-D',
                ll: 'YYYY年M月D日',
                lll: 'YYYY年M月D日 HH:mm',
                llll: 'YYYY年M月D日dddd HH:mm'
            },
            meridiemParse: /凌晨|早上|上午|中午|下午|晚上/,
            meridiemHour: function (hour, meridiem) {
                if (hour === 12) {
                    hour = 0;
                }
                if (meridiem === '凌晨' || meridiem === '早上' ||
                    meridiem === '上午') {
                    return hour;
                } else if (meridiem === '下午' || meridiem === '晚上') {
                    return hour + 12;
                } else {
                    // '中午'
                    return hour >= 11 ? hour : hour + 12;
                }
            },
            meridiem: function (hour, minute, isLower) {
                const hm = hour * 100 + minute;
                if (hm < 600) {
                    return '凌晨';
                } else if (hm < 900) {
                    return '早上';
                } else if (hm < 1130) {
                    return '上午';
                } else if (hm < 1230) {
                    return '中午';
                } else if (hm < 1800) {
                    return '下午';
                } else {
                    return '晚上';
                }
            },
            calendar: {
                sameDay: '[今天]LT',
                nextDay: '[明天]LT',
                nextWeek: '[下]ddddLT',
                lastDay: '[昨天]LT',
                lastWeek: '[上]ddddLT',
                sameElse: 'L'
            },
            dayOfMonthOrdinalParse: /\d{1,2}(日|月|周)/,
            ordinal: function (number, period) {
                switch (period) {
                    case 'd':
                    case 'D':
                    case 'DDD':
                        return number + '日';
                    case 'M':
                        return number + '月';
                    case 'w':
                    case 'W':
                        return number + '周';
                    default:
                        return number;
                }
            },
            relativeTime: {
                future: '%s内',
                past: '%s前',
                s: '几秒',
                ss: '%d秒',
                m: '1分钟',
                mm: '%d分钟',
                h: '1小时',
                hh: '%d小时',
                d: '1天',
                dd: '%d天',
                M: '1个月',
                MM: '%d个月',
                y: '1年',
                yy: '%d年'
            },
            week: {
                // GB/T 7408-1994《数据元和交换格式·信息交换·日期和时间表示法》与ISO 8601:1988等效
                dow: 1, // Monday is the first day of the week.
                doy: 4  // The week that contains Jan 4th is the first week of the year.
            }
        });
    </script>
    <!--图片懒加载-->
    <script src="/static/front/js/lazyload.min.js"></script>
    <script type="text/javascript">
        var lazyLoadInstance = new LazyLoad({
            elements_selector: ".lazy"
        });
    </script>
    <!--浏览器标签栏上的标题-->
    <title>FantasyBlog</title>
</head>
<!--end head-->
<body>
<!--navbar-->
<header class="navbar-fixed" th:fragment="header">
    <nav class="bg-color nav-transparent" id="headNav">
        <div class="nav-wrapper container" id="navContainer">
            <!--LOGO-->
            <div class="brand-logo">
                <a class="waves-effect waves-light" href="../admin">
                    <span class="logo-span">FantasyBlog后台</span>
                </a>
            </div>
            <!--移动设备导航栏-->
            <a class="sidenav-trigger button-collapse" data-target="mobile-nav" href="#"><i class="fas fa-bars"></i></a>
            <!--导航栏菜单-->
            <ul class="right nav-menu">
                <li class="hide-on-med-and-down nav-item">
                    <a class="waves-effect waves-light" th:href="@{/}">
                        <i class="fas fa-home" style="zoom: 0.6;"></i>
                        <span>首页</span>
                    </a>
                </li>
                <li class="hide-on-med-and-down nav-item">
                    <a class="waves-effect waves-light" th:href="@{/page/tags}">
                        <i class="fas fa-tags" style="zoom: 0.6;"></i>
                        <span>标签</span>
                    </a>
                </li>
                <li class="hide-on-med-and-down nav-item">
                    <a class="waves-effect waves-light" th:href="@{/page/categories}">
                        <i class="fas fa-bookmark" style="zoom: 0.6;"></i>
                        <span>分类</span>
                    </a>
                </li>
                <li class="hide-on-med-and-down nav-item">
                    <a class="waves-effect waves-light" th:href="@{/page/archives}">
                        <i class="fas fa-calendar" style="zoom: 0.6;"></i>
                        <span>归档</span>
                    </a>
                </li>
                <li class="hide-on-med-and-down nav-item">
                    <a class="waves-effect waves-light" th:href="@{/page/about}">
                        <i class="fas fa-paper-plane" style="zoom: 0.6;"></i>
                        <span>关于</span>
                    </a>
                </li>
                <li class="hide-on-med-and-down nav-item">
                    <a class="waves-effect waves-light" th:href="@{/page/friends}">
                        <i class="fas fa-comment" style="zoom: 0.6;"></i>
                        <span>友情链接</span>
                    </a>
                </li>
                <li>
                    <a class="modal-trigger waves-effect waves-light" href="#searchModal" id="searchBtn">
                        <i class="fas fa-search" id="searchIcon" style="zoom: 0.85;" title="搜索"></i>
                    </a>
                </li>
            </ul>
        </div>
        <!--github-corner-->
        <a class="github-corner tooltipped hide-on-med-and-down" data-delay="50" data-position="left"
           data-tooltip="Fork Me" href="https://github.com/geek-cy" target="_blank">
            <svg aria-hidden="true" viewbox="0 0 250 250">
                <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
                <path class="octo-arm"
                      d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
                      fill="currentColor" style="transform-origin: 130px 106px;"></path>
                <path class="octo-body"
                      d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
                      fill="currentColor"></path>
            </svg>
        </a>
        <!--end github-corner-->
    </nav>

</header>
<!--end navbar-->

<!--bgcover-->
<div class="bg-cover pd-header about-cover" th:fragment="bgcover">
    <div class="container">
        <div class="row">
            <div class="col s10 offset-s1 m8 offset-m2 l8 offset-l2">
                <div class="brand">
                    <div class="title center-align">FantasyBlog</div>
                    <div class="description center-align">
                        <span id="subtitle"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--end bgcover-->

<!--footer-->
<footer class="page-footer bg-color" th:fragment="footer">
    <!--网站信息-->
    <div id="recode" class="container row center-align" style="margin-bottom: 15px !important;">
        <!--copyright-->
        <div class="col s12 m8 l8 copy-right">
            Powered by&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>
            |&nbsp;Theme&nbsp;<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">Matery</a>
            <br>
            <a> &nbsp; &nbsp; PV: <a><span>{{pv}}</span></a></a>
            <a>  &nbsp;&nbsp; &nbsp;UV:<a><span>{{uv}}</span></a></a>
            <br/>
            <!--网站运行时间-->
            <span id="sitetime">载入运行时间...</span>
            <br>
            <!--ICP备案-->
            <span id="icp">
            <img src="" style="vertical-align: text-bottom;">
                <a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=32059002003557">
                    <img src="https://cdn.jsdelivr.net/gh/geek-cy/img/ICP/icp.png" style="float:left;margin: 0px 0px 0px 60px;"/>
                    <p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px;">苏公网安备 32059002003557号</p></a>
            <a href="http://beian.miit.gov.cn/" target="_blank" style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px;">苏ICP备2021023808号</a>
                <a target="_blank" style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px;">© 2009-2021 Aliyun.com 版权所有</a>
            </span>
        </div>
        <!--联系方式-->
        <div class="col s12 m4 l4 social-link social-statis">
            <!--联系图标-->
            <a class="tooltipped" data-delay="50" data-position="top" data-tooltip="访问我的GitHub"
               href="https://github.com/geek-cy"
               target="_blank">
                <i class="fab fa-github"></i>
            </a>
            <a class="tooltipped" data-delay="50" data-position="top" data-tooltip="邮件联系我"
               href="mailto:geek_cy@qq.com" target="_blank">
                <i class="fas fa-envelope-open"></i>
            </a>
        </div>
    </div>
</footer>
<!--end footer-->

<!--commons-->
<div th:fragment="commons">
    <!--进度条-->
    <div class="progress-bar"></div>
    <!-- 搜索遮罩框 -->
    <div class="modal" id="searchModal">
        <div class="modal-content">
            <div class="search-header">
                <span class="title"><i class="fas fa-search"></i>&nbsp;&nbsp;搜索</span>
                <input class="search-input" id="searchInput" name="s" placeholder="请输入搜索的关键字" type="search"
                       v-model="keyword" @change="toSearch()">
            </div>
            <div id="searchResult">
                <ul class="search-result-list" v-if="searchResult.length > 0">
                    <li v-for="item in searchResult" :key="item.id">
                        <a :href="'/article/'+item.id" class="search-result-title" v-html="item.title"></a>
                        <p class="search-result" v-html="item.summary"></p>
                        <p class="search-result" v-html="item.content"></p>
                    </li>
                </ul>
                <ul class="search-result-list" v-if="searchResult.length <= 0">
                    <li>
                        <span class="search-result-title">没有搜索到结果</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- 回到顶部按钮 -->
    <div class="top-scroll" id="backTop">
        <a class="btn-floating btn-large waves-effect waves-light" href="#">
            <i class="fas fa-arrow-up"></i>
        </a>
    </div>
</div>
<!--end commons-->

<!--scripts--->
<div th:fragment="scripts">
    <!--网页离子背景-->
    <!--    <script color="0,0,255" count="99" opacity='0.7' pointcolor="0,0,255" src="/static/front/js/xuehuapiaoluo.js"-->
    <!--            type="text/javascript"-->
    <!--            zindex="-2"></script>-->
    <!--<script color="122 103 238" count="200" opacity='0.7' src="/static/front/js/xuehuapiaoluo.min.js"
            type="text/javascript"
            zindex="-2"></script>-->
    <script type="text/javascript">
        new Vue({
            el: '#searchModal',
            data: {
                keyword: '',
                searchResult: [],
            },
            methods: {
                toSearch: function (keyword) {
                    if (keyword == null || keyword === '') {
                        return false;
                    }
                    axios({
                        url: '/articles/search?keyword=' + keyword,
                        method: 'GET',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                    }).then((result) => {
                        this.searchResult = result.data;
                    })
                },
            },
            watch: {
                keyword: function (value) {
                    this.toSearch(value);
                }
            },
        });
        new Vue({
            el: '#recode',
            data: {
                pv: '',
                uv: '',
            },
            methods: {
                load: function () {
                    axios({
                        url: '/count',
                        method: 'GET',
                        headers: {
                            'X-Requested-With': 'XMLHttpRequest'
                        },
                    }).then((response) => {
                        this.pv = response.data.pv;
                        this.uv = response.data.uv;
                    })
                },
            },
            /*自动加载*/
            created() {
                this.load();
            }
        });
    </script>
    <!--materialize框架-->
    <script src="/static/front/js/materialize.min.js"></script>
    <!--瀑布流-->
    <script src="/static/front/js/masonry.pkgd.min.js"></script>
    <!--页面滚动动画-->
    <script src="/static/front/js/aos.js"></script>
    <!--滚动进度条-->
    <script src="/static/front/js/scrollProgress.min.js"></script>
    <!--matery主题-->
    <script src="/static/front/js/matery.js"></script>
    <!--鼠标点击特效-->
    <script async="async" src="/static/front/js/clicklove.js"></script>
    <!--未知-->
    <script async="async" src="/static/front/js/ribbon-dynamic.js" type="text/javascript"></script>
    <!--网站标题切换-->
    <script type="text/javascript">
        var OriginTitile = document.title, st;
        document.addEventListener("visibilitychange", function () {
            document.hidden ? (document.title = "点这里，我这里有好康的！", clearTimeout(st)) : (document.title = "宁来啦！", st = setTimeout(function () {
                document.title = OriginTitile
            }, 3e3))
        })
    </script>
    <!--多媒体播放-->
    <script src="/static/front/js/lightgallery-all.min.js"></script>
    <!--url参数获取-->
    <script src="/static/front/js/queryString.js"></script>
    <!--网站计时-->
    <script async type="text/javascript">
        function siteTime() {
            window.setTimeout("siteTime()", 1000);
            var seconds = 1000;
            var minutes = seconds * 60;
            var hours = minutes * 60;
            var days = hours * 24;
            var years = days * 365;
            var today = new Date();
            var todayYear = today.getFullYear();
            var todayMonth = today.getMonth() + 1;
            var todayDate = today.getDate();
            var todayHour = today.getHours();
            var todayMinute = today.getMinutes();
            var todaySecond = today.getSeconds();
            /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)
            year - 作为date对象的年份，为4位年份值
            month - 0-11之间的整数，做为date对象的月份
            day - 1-31之间的整数，做为date对象的天数
            hours - 0(午夜24点)-23之间的整数，做为date对象的小时数
            minutes - 0-59之间的整数，做为date对象的分钟数
            seconds - 0-59之间的整数，做为date对象的秒数
            microseconds - 0-999之间的整数，做为date对象的毫秒数 */
            var t1 = Date.UTC(2021, 0o6, 0o1, 19, 20, 0o0); // 北京时间2021-6-1 19:20:00
            var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
            var diff = t2 - t1;
            var diffYears = Math.floor(diff / years);
            var diffDays = Math.floor((diff / days) - diffYears * 365);
            var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
            var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) / minutes);
            var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);
            document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffYears + " 年 " + diffDays + " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
        }

        siteTime();
    </script>
    <!--平滑滚动-->
    <script src="/static/front/js/jquery.scrollTo.min.js"></script>
    <!--弹出层-->
    <script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
</div>
<!--scripts-->
</body>
</html>
